<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>
    <span class="label label-info">DEMO 6状态提升官网例子</span>
  </h1>
  <br>
  <br>
  <br>
  <div class="well" id="well">

  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>

  <script type="text/babel">
    const scaleNames = {
      c: 'Celsius',
      f: 'Fahrenheit'
    };
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }

    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }

    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }
    // TemperatureInput组件：
    // 当前子组件： input改变触发handleChange(e) --> 子组件属性onTemperatureChange(值) --> 父组件的方法xxxx --> 父组件state变化
    // 另一个子组件：父组件state变化 --> 父组件state之外的变量决定其状态
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
      }

      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature} onChange={this.handleChange} />
          </fieldset>
        );
      }
    }

    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>水会烧开</p>;
      }
      return <p>水不会烧开</p>;
    }
    // state:
    // {
    //  temperature,
    //  scale
    //}
    class Calculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature: '', scale: 'c'};
      }

      handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
      }

      handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
      }

      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        // celsius和fahrenheit是这个组件的state之外的变量：
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
        return (
          <div>
            <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict celsius={parseFloat(celsius)} />
          </div>
        );
      }
    }


    ReactDOM.render(
        <Calculator />,
        document.getElementById('well')
    )
  </script>
</body>
</html>